<template>
  <div>
    <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  created () {
    this.getMenus()
  },
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data () {
    return {
      menus: [],
      expandedKey: [],
      defaultProps: {
        children: 'childrenList',
        label: 'name'
      }
    }
  },
  // 计算属性类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  methods: {
    handleNodeClick (data) {
      console.log(data)
    },
    async getMenus () {
      const { data: result } = await this.$http.get('/product/category/list/tree')
      console.log(result.data)
      this.menus = result.data
      console.log(this.menus)
    }
  }
}
</script>

<style scoped>
</style>
